<template>
    <div class="box">
        <h2 class="title">todos</h2>
        <div class="content">
            <div class="input">
                <input type="text" @keyup.enter="addTodo" placeholder="你接下来要做什么?">
            </div>
            <ul>
                <li v-for="(todo, index) in todos" :key="todo.id">
                    <div>
                        <input type="checkbox" :checked="todo.isDone" v-model="todo.isDone">
                        <span :class="[todo.isDone ? 'del-line' : '']">{{ todo.name }}</span>
                    </div>
                    <div title="删除" @click="delTodo(index)">×</div>
                </li>

            </ul>
            <div class="footer" v-if="todos.length !== 0">
                <span>{{ unTodoCount }}项未完成</span>
                <div>
                    <span @click="clearDone">清除已完成</span>
                    <span class="selectAll" @click="checkAll">全选</span>
                </div>
            </div>
            <div v-else style="text-align:center;font-size:20px;">
                暂无任务
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, watch, onMounted } from 'vue'
const todos = ref([
    // { id: 1, name: '写代码html', isDone: true },
    // { id: 2, name: '写代码js', isDone: false },
    // { id: 3, name: '写代码vue', isDone: true },
])

// 挂载时获取本地存储的数据，将数据赋值到待办事项里
onMounted(() => {
    todos.value = JSON.parse(localStorage.getItem('todos') ? localStorage.getItem('todos') : '[]')
})

// 监听待办事项的变化，将数据存到本地存储里
watch(todos, () => {
    console.log('watch');
    localStorage.setItem('todos', JSON.stringify(todos.value))
}, {
    deep: true
})

// 全选
let isAll = false
const checkAll = () => {
    isAll = !isAll
    todos.value.forEach(todo => {
        todo.isDone = isAll
    })
}

// 清除已完成
const clearDone = () => {
    todos.value = todos.value.filter(todo => !todo.isDone)
}

// 删除todo
const delTodo = (index) => {
    if (confirm('确认删除吗？')) {
        todos.value.splice(index, 1)
    }
}

// 添加todo
const addTodo = (event) => {
    // event.target：获取事件发生的目标元素
    let name = event.target.value.trim()
    if (!name) {
        alert('内容不能为空')
        return
    }
    let todo = { id: Date.now(), name, isDone: false }
    todos.value.unshift(todo)
    // 清空输入框
    event.target.value = ''
}

// 计算未完成的todo数量
const unTodoCount = computed(() => {
    return todos.value.filter(todo => !todo.isDone).length
})

</script>

<style scoped>
* {
    padding: 0;
    margin: 0;
}

.box {
    width: 300px;
    margin: 50px auto;
}

.input input {
    width: 100%;
    height: 40px;
    border: 1px solid #999;
    outline: none;

}
/* 带有属性为type=checkbox的input标签：属性选择器 */
input[type=checkbox] {
    margin-right: 30px;
}

.box .title {
    text-align: center;
}

ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
}

.selectAll {
    margin-left: 10px;
}

.footer {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.del-line {

    color: #666;
    text-decoration: line-through;
}
</style>